<template>
  <div class="accountDialog">
  <el-dialog title="账号验证" :visible.sync="showDialog" width="385px" :before-close="close">
    <el-form label-position="rigth" ref="form" :model="form" :rules="rules">
      <el-form-item label="手机号" :label-width="formLabelWidth">
        <el-input :disabled="true" v-model="mobile" auto-complete="on"></el-input>
      </el-form-item>
      <el-form-item label="验证码" :label-width="formLabelWidth" prop="identifyingCode">
        <el-input v-model="form.identifyingCode"  auto-complete="off" style="width:70%"></el-input ><el-button @click="code_clickHandler">获取</el-button>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="close">取 消</el-button>
      <el-button type="primary" @click="submit">确 定</el-button>
    </div>
  </el-dialog>
  </div>
</template>
<script>
  export default {
    props:["showDialog","mobile","phoneCode","phoneCodeSubmit"],
    data() {
      return {
        formLabelWidth: '70px',
        form:{
          identifyingCode:''
        },
        rules:{
          identifyingCode:[
              { required: true, message: '请输入验证码', trigger: 'blur' }
          ]
        }
      }
    },
    methods:{
      code_clickHandler(){
        let params={
          codeType : 1,
          mobile   : this.mobile
        }
        this.phoneCode(params);
      },
      submit(){
        this.$refs["form"].validate((valid)=>{
           if(valid){
             let params = {
               identifyingCode : this.form.identifyingCode,
               mobile          : this.mobile
             }
             this.phoneCodeSubmit(params);
           }
        });
      },
      close(){
        this.$emit('update:showDialog', false)
      }
    },
    created(){
      // this.form.mobile = this.mobile;
    }
  };
</script>
<style>
  .accountDialog .el-form-item{
    background: #fff;
    border: 1px solid #409eff;
  }
  .accountDialog .el-form-item__label{
    height: 47px;
    line-height: 47px;
  }
  .accountDialog .el-input{
    width: 100%;
  }
  .accountDialog input{
    color: #000;
  }
</style>
